<template>
	<view class="home">
		<!-- 头部搜索 -->
		<view class="header">
			<view class="top">
				<i class="iconfont icon-sousuo" @click="searchBtn"></i>
				<view class="flex1" @click="searchBtn">

				</view>
				<i class="iconfont icon-dingwei"></i>
				<view class="" @click="goCityBtn">
					<!-- {{city}} -->
					{{cityName}}
				</view>
			</view>
		</view>
		<!-- 主题导航 -->
		<view class="nav">
			<!-- <u-grid col="5"> -->
			<view class="nav-item" v-for="(item,index) in img" :key="index">
				<image :src="item.Url" mode=""></image>
				<text>{{item.text}}</text>
			</view>
		</view>
		<!-- 帮我找房 -->
		<view class="help">
			<view class="help-title">
				帮我找房
			</view>
			<view class="hele-main">
				<view class="help-text">
					<view>全城经纪人为您服务</view>
					<view>极速响应/专属推荐</view>
					<image src="../../static/images/service.png" mode=""></image>
				</view>
			</view>
		</view>
		   <!-- 新房本周热门好房 -->
		   <view class="helpRoom bridal-title">新房•本周热门好房</view>
		   <view class="bridal">
			   <view class="bridal-Box" v-for="item in topList" :key="item.id">
			   <view class="bridal-imgBox">
				   <image :src="item.imgs" mode=""></image>
				   <view class="bridal-smallTitle">{{item.area}}</view>
			   </view>
			   <view class="bridal-text">{{item.name}}</view>
			   <view class="bridal-area">{{item.point+'㎡'}}</view>
			   <view class="bridal-price">{{item.price+'元/㎡'}}</view>
			  </view>
		   </view>
		<!-- 猜你喜欢 -->
		<view class="love">
			<view class="love-p">
				猜你喜欢
			</view>
			<view v-for="item in loveList" :key="item.id">
				<HouseItem :item='item'></HouseItem>
			</view>
			<!-- 			<view class="love-v" v-for="item in loveList" :key="item.id" @click="goHouse(item)">
				<image :src="item.imgs" mode=""></image>
				<view class="flex1 love-text">
					<view>{{item.name}}</view>
					<view>{{item.type}}/{{item.point}}m²/{{item.range}}</view>
					<view class="item-box">
						<view v-for="(item1,index1) in item.tabs" :key="index1">
							{{item1}}
						</view>
					</view>
					<view>{{item.price}}/平</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getHouse,
		topList
	} from '@/api/home.js'
	import HouseItem from '@/components/house-item.vue'
	export default {
		components: {
			HouseItem
		},
		data() {
			return {
				// city: '北京'
				img: [{
						Url: '../../static/images/1.png',
						text: '二手房'
					},
					{
						Url: '../../static/images/2.png',
						text: '新房'
					},
					{
						Url: '../../static/images/3.png',
						text: '租房'
					}, {
						Url: '../../static/images/4.png',
						text: '装修'
					}, {
						Url: '../../static/images/5.png',
						text: '家居商城'
					}, {
						Url: '../../static/images/01.png',
						text: '卖房'
					}, {
						Url: '../../static/images/02.png',
						text: '家政服务'
					}, {
						Url: '../../static/images/03.png',
						text: '商铺办公'
					}, {
						Url: '../../static/images/04.png',
						text: '买卖流程'
					}, {
						Url: '../../static/images/05.png',
						text: '维修'
					}, {
						Url: '../../static/images/06.png',
						text: '好攒好房'
					}, {
						Url: '../../static/images/07.png',
						text: '社区生活'
					}, {
						Url: '../../static/images/08.png',
						text: '找经纪人'
					},
					{
						Url: '',
						text: ''
					},
					{
						Url: '',
						text: ''
					},
				],
				pageData: {
					page: 1,
					pagesize: 10
				},
				loveList: [],
				topList:[],
			};
		},
		computed: {
			...mapState(['cityName'])
		},
		created() {
			// #ifdef MP
			this.getCity()
			// #endif
			this.getHoseList()
			this.getTopList()
		},
		methods: {
			searchBtn() {
				uni.navigateTo({
					url: '/pages/home/search'
				})
			},
			...mapMutations(['changeCity']),
			goCityBtn() {
				// #ifdef H5 ||APP 
				uni.navigateTo({
					url: '/pages/home/city'
				})
				// #endif

				// #ifdef MP
				this.getCity()
				// #endif
				
				// #ifdef MP
					// 小程序 点击位置 直接跳转到  地图页面
					uni.navigateTo({
						url:'/pages/home/address'
					})
				// #endif
			},
			getCity() {
				let that = this
				uni.getLocation({
					success(res) {
						// console.log(res);
						uni.request({
							url: 'https://apis.map.qq.com/ws/geocoder/v1/',
							method: 'get',
							data: {
								key: 'ZLKBZ-OLRHN-WCEFI-SSQJ2-ISZ67-63BCY',
								location: `${res.latitude},${res.longitude}`
							},
							success(res) {
								console.log(res);
								that.changeCity(res.data.result.address_component.city)
								// console.log(that.goCity);
							}
						})
					}

				})
			},
			async getTopList() {
				let res = await topList()
				console.log(res);
				this.topList=res.data
			},
			async getHoseList() {
				let res = await getHouse(this.pageData)
				console.log(res);
				// 拿到房源列表处理每个房源的 tabs 转换为数组
				res.data.forEach(item => {
					item.tabs = JSON.parse(item.tabs.replace(/'/g, '"'))
				})
				this.loveList.push(...res.data)
			},
			// //跳转详情
			// goHouse(item){
			// 	// 存数据到vuex 
			// 	this.$store.commit('house/changeCurrent',item)
			// 	//跳转页面
			// 	uni.navigateTo({
			// 		url:'/pages/houselist/houselist'
			// 	})
			// },


			// 上拉触底 执行的生命周期--数据的分页--数据的懒加载
			onReachBottom() {
				this.pageData.page++
				this.getHoseList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	//顶部搜素
	.home {
		height: 100%;
		width: 100%;
	}

	.header {
		width: 750rpx;
		height: 264rpx;
		background: #eb5227;
		padding-top: 16rpx;
	}

	.top {
		width: 620rpx;
		height: 40rpx;
		background: rgba(255, 255, 255, .8);
		border-radius: 16rpx;
		margin: 0 auto;
		padding: 20rpx;
		display: flex;
	}

	i {
		margin-top: 7rpx;
	}

	//帮我找房
	.help {
		.help-title {
			margin-left: 46rpx;
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
			margin-top: 30rpx;
		}

		.hele-main {
			margin: 0 auto;
			width: 90%;
			height: 240rpx;
			// background-color: aqua;
			position: relative;
			border: 2rpx solid #cccccc;
			border-radius: 15rpx;

			.help-text {
				position: absolute;
				top: 80rpx;
				position: relative;
				padding-left: 20rpx;
				image{
					width: 170rpx;
					height: 170rpx;
					position: absolute;
					right: 0;
					bottom: -50rpx;
				}
			}
		}

	}

	//上部导航
	.nav {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.nav-item {
		padding: 23rpx;
		// width: 100rpx;
		display: flex;
		flex-direction: column;

		image {
			width: 100rpx;
			height: 70rpx;
			margin-bottom: 10rpx;
		}

		text {
			width: 100rpx;
			text-align: center;
			font-size: 20rpx
		}
	}

   // 新房热门房
	.bridal-title{
		// margin: 56rpx 0 33rpx 0;
		font-size: 40rpx;
		font-weight: bold;
		margin: 40rpx 40rpx;
	}
	.bridal{
		width: 660rpx;
		padding:  0 45rpx;
		height: 280rpx;
		display: flex;
		justify-content: space-between;
	}
	.bridal-Box{
		width: 209rpx;
		height: 280rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.bridal-imgBox{
		width: 100%;
		height: 160rpx;
		position: relative;
	}
	.bridal-imgBox image{
		width: 100%;
		height: 100%;
	}
	.bridal-smallTitle{
		background-color: #ffffff;
		position: absolute;
		padding: 8rpx;
		bottom: 8rpx;
		right: 8rpx;
	}
	.bridal-text{
		font-size: 25rpx;
		font-weight: 600;
	}
	.bridal-area{
		font-size: 15rpx;
		color: #999999;
	}
	.bridal-price{
		font-size: 25rpx;
		color: #e7624b;
	}

	//猜你喜欢
	.love {
		.love-p {
			// margin-left: 46rpx;
			margin: 30rpx 46rpx;
			font-size: 40rpx;
			font-weight: bold;
		}

		// .love-v{
		// 	margin: 0 auto;
		// 	padding: 40rpx 0;
		// 	width: 650rpx;
		// 	height: 160rpx;
		// 	// background-color: #eb5227;
		// 	display: flex;
		// 	image{
		// 		width: 210rpx;
		// 		height: 160rpx;
		// 	}
		// 	.love-text{
		// 		margin-left: 30rpx;
		// 		.item-box{
		// 			display: flex;
		// 			flex-wrap: wrap;
		// 		}
		// 	}
		// }
	}
</style>